Setting up and understanding the user interface

In this project, the goal is to create a chatbot with an interface that allows communication.

First, let's set up the environment by executing the following code:

  1. 1
  2. 2
  3. 3
  1. pip3 install virtualenv
  2. virtualenv my_env # create a virtual environment my_env
  3. source my_env/bin/activate # activate my_env

The frontend will use HTML, CSS, and JavaScript. The user interface will be similar to many chatbots you see and use online. The code for the interface is provided and the focus of this guided project is to connect this interface with the backend that handles the uploading of your custom documents and integrates it with an LLM model to get customized responses. The provided code will help you to understand how the frontend and backend interact, and as you go through it, you will learn about the important parts and how it works, giving you a clear understanding of how the frontend works and how to create this simple web page.

Run the following commands to retrieve the project, give it an appropriate name, and finally move to that directory by running the following:

  1. 1
  2. 2
  3. 3
  1. git clone https://github.com/sinanazeri/build_own_chatbot_without_open_ai.git
  2. mv build_own_chatbot_without_open_ai build_chatbot_for_your_data
  3. cd build_chatbot_for_your_data

installing the requirements for the project

  1. 1
  1. pip install -r requirements.txt

Have a cup of coffee, it will take 5-10 minutes to install the requirements (You can continue this project while the requirements are installed).

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  1. ) (
  2. ( ) )
  3. ) ( (
  4. _______)_
  5. .-'---------|
  6. ( C|/\/\/\/\/|
  7. '-./\/\/\/\/|
  8. '_________'
  9. '-------'

The next section gives a brief understanding of how the frontend works.

HTML, CSS, and JavaScript

The index.html file is responsible for the layout and structure of the web interface. This file contains the code for incorporating external libraries such as JQuery, Bootstrap, and FontAwesome Icons, and the CSS (style.css) and JavaScript code (script.js) that control the styling and interactivity of the interface.

The style.css file is responsible for customizing the visual appearance of the page's components. It also handles the loading animation using CSS keyframes. Keyframes are a way of defining the values of an animation at various points in time, allowing for a smooth transition between different styles and creating dynamic animations.

The script.js file is responsible for the page's interactivity and functionality. It contains the majority of the code and handles all the necessary functions such as switching between light and dark mode, sending messages, and displaying new messages on the screen. It even enables the users to record audio.